/*Body*/
body {
    background-image: url('img/bg.jpg');
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    padding: 10px 0;
}

.clear {
    border-top: 1px #4477a1 dashed;
    clear: both;
}

.body-content{
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
    overflow: hidden;
}

.footer{
    border-radius: 5px;
    background: rgba(0,0,0,0.5);
}

/*Layout*/
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 0 0 1%;
}

.row {
    clear: both;
    padding: 0 10px;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;
    margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
    margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
    width: 100%;
    height: auto;
    display: block;
}

/*Menu bar*/
#nav {
    float: right;
    font: bold 12px Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}

#nav ul {
    margin:0;
    padding:0;
    list-style:none;
}

#nav ul li {
    float:right;
}

#nav ul li a {
    float: right;
    color:#d4d4d4;
    padding: 10px 20px;
    text-decoration:none;
    background: rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0,0,0,0.2);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover {
    background: rgba(0,0,0,.9);
}

/*Search form*/
.searchForm {
    width: 100%;
    height: 38px;
    border-radius: 3px;
    display: inline-block;
}

.searchForm input[type='text'] {
    width: 85%;
    height: 31px;
    margin-left: 0px;
    border-radius: 3px;
    padding-left: 5px;
    border: 1px aliceblue solid;
    border-color: rgba(0,0,0,0.3);
}

.searchForm input[type='text']:hover {
    border: 2px aliceblue solid;
    border-color: rgba(0,0,0,0.5);
}

.searchForm button[type='submit'] {
    height: 38px;
    background: rgba(0,0,0,.5);
    border-radius: 3px;
    float: right;
    border: none;
    cursor: pointer;
    margin-right: 10px;
}

/*Post*/
.post {
    width: 100%;
    background: aliceblue;
    border-radius: 3px;
    overflow: hidden;
    padding: 10px 0px 10px 10px;
}
.post .title {
    padding: 5px;
    background: #cccccc;
    border-left: 10px cornflowerblue solid;
    border-radius-bottom-right: 10px;
    border-radius-top-right: 10px;
    font-size: 17px;
    font-weight: bold;
}


/*Pagination*/
.pagination {

}
.pagination ul {   
    list-style: none;
    padding: 10px;
}
.pagination ul li {
    background: rgba(0,0,0,.7);
    padding: 5px;
    display: inline;
    border-radius: 3px;
}

li[class='active'] {
    background: #cccccc;
}
.pagination ul li a{
    color: white;
    font-size: 17px;
    text-decoration: none;
}

/*Form*/
.lable-control {
    display: block;
}

.loginForm, #donate {
    margin-left: 10px;
    width: 80%;
    border-radius: 3px;
    background: aliceblue;
    padding: 15px;
}

.loginForm lable{
    padding: 5px;
    border-left: 10px cornflowerblue solid;
    font-size: 17px;
    font-weight: bold;
}

.loginForm input[type='text'], input[type='password'] {
    padding-left: 5px;
    display: block;
    width: 100%;
    margin: 10px 0px 10px 0px;
    border-radius: 3px;    
    height: 30px;
    border: 1px aliceblue solid;
    border-color: rgba(0,0,0,0.3);

}
.loginForm input[type='text']:hover, input[type='password']:hover {
    border-color: rgba(0,0,0,0.6);
}

.loginForm input[type='submit'] {
    width: auto;
    height: 30px;
    border: none;
    cursor: pointer;
    display: inline;
    border-radius: 3px;
    font-size: 17px;
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}


.loginForm input[type='submit']:hover
{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}

.button-blue:active
{
    background: #4477a1;
}

/*Post content area*/
.post-content {
    width: 96%;
    padding: 20px;
    border: 1px #cccccc solid;
    overflow: hidden;
    background: aliceblue;
    border-radius: 3px;
}

.post-content .content-area {
    border-left: 1px #4477a1 dashed;
    border-right: 1px #4477a1 dashed;
    padding: 10px;
}

.post-content span {
    padding: 10px;
    border-left: 10px cornflowerblue solid;
    border-radius: 3px;
    font-size: 20px;
    border-right: 2px #81a8cb solid;
    border-bottom: 2px #81a8cb solid;
    border-top:  2px #81a8cb solid;
}

.info {
    position: relative;
    float: right;
    top: -10px;
}

.info lable {
    display: block;
}

.info lable a {
    text-decoration: none;
}

.info lable a:hover {
    padding: 2px;
    background: #4477a1;
    border-radius: 2px;
    color: white;
}

.info lable[id='member']:before {
    content: "Bài viết bởi: ";
}

.info lable[id='time']:before {
    content: "Ngày viết bài: ";
}

.donate-area form input[type='text'] {
    padding-left: 5px;
    display: inline;
    width: 50%;
    margin: 10px 0px 10px 0px;
    border-radius: 3px;
    height: 30px;
    border: 1px aliceblue solid;
    border-color: rgba(0,0,0,0.3);

}
.donate-area form input[type='text']:hover, input[type='password']:hover {
    border-color: rgba(0,0,0,0.6);
}

.donate-area form input[type='submit'] {
    width: auto;
    height: 30px;
    border: none;
    cursor: pointer;
    display: inline;
    border-radius: 3px;
    font-size: 17px;
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}


.donate-area form input[type='submit']:hover
{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}

/*comment secsion*/
.comment {
    width: 98%;
    padding: 10px;
    border: 1px #cccccc solid;
    overflow: hidden;
    margin-top: 20px;
    background: aliceblue;
    border-radius: 3px;
}

.comment form input[type='text'] {
    padding-left: 5px;
    display: inline;
    width: 50%;
    margin: 10px 0px 10px 0px;
    border-radius: 3px;
    height: 30px;
    border: 1px aliceblue solid;
    border-color: rgba(0,0,0,0.3);

}
.comment form input[type='text']:hover, input[type='password']:hover {
    border-color: rgba(0,0,0,0.6);
}

.comment form input[type='submit'] {
    margin-top: 5px;
    width: auto;
    height: 30px;
    border: none;
    cursor: pointer;
    display: inline;
    float: right;
    border-radius: 3px;
    font-size: 17px;
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}


.comment form input[type='submit']:hover
{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}

/*Images*/
#picture {
    margin: 0xp;
    list-style: none;
    padding-left: 0xp;
}

#picture img {
    border-radius: 2px;
    margin-top: 20px;
    margin-right: 20px;
}

.well {
    font-size: 17px;
    text-align: center;
    font-weight: bold;
}

.comment form textarea {
    width: 95%;
    padding: 20px;
    border-radius: 3px;
    border-color: rgba(0,0,0,.5);
}

.comment form textarea:hover {
    border-color: rgba(0,0,0,.9);
}

/*Admin menu*/
.admin-menu {
    width: 80%;
    padding: 20px;
    border: 1px #cccccc solid;
    overflow: hidden;
    background: aliceblue;
    border-radius: 3px;
}

.admin-menu li {
    list-style: none;
    background: #d4d4d4;
    margin: 5px 0px 5px 0px;
    padding: 5px 5px 5px 10px;
    border-radius: 2px;
}

.admin-menu a {
    text-decoration: none;
}

.admin-menu li:hover {
    background: rgba(0,0,0, .5);
}

.admin-menu a:hover {
    color: white;
}

.admin-body {
    padding: 20px;
    border: 1px #cccccc solid;
    overflow: hidden;
    background: aliceblue;
    border-radius: 3px;
}

/*Table*/
.table {
    width: 100%;
    border: 1px #4477a1 solid;
    border-radius: 3px;
}

.table thead {
    background: #d4d4d4;
}

.table tr:hover {
    background: rgba(0,0,0,.3);
}

.table tr td {
    text-align: center;
    vertical-align: middle;
}

.table tr td a {
    text-decoration: none;
}
/*Account info*/
.account-info {
    margin-left: 10px;
    width: 80%;
    border-radius: 3px;
    background: aliceblue;
    padding: 15px;
    margin-bottom: 20px;
}

.account-info a[role='button'] {
    text-decoration: none;
    background: rgba(0,0,0,.3);
    border-radius: 3px;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: black;
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

.account-info a[role='button']:hover {
    background: rgba(0,0,0,.5);
}

.alert {
    padding: 5px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    width: 88%;
    margin-left: 4.3%;
    margin-bottom: 20px;
    margin-top: 20px;
}
